<template>
    <div class="search">
    <el-form :inline="true" :model="search">
        <el-form-item>
            <el-date-picker v-model="search.year" type="year" placeholder="选择年份"/>
        </el-form-item>
        <el-form-item>
            <el-date-picker v-model="search.month" type="month" placeholder="选择月份"/>
        </el-form-item>
        <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
    </el-form>
    </div>
    <div class="content">
        <el-table :data="attendanceData" style="width: 100%">
            <el-table-column fixed prop="id" label="ID" width="100" />
            <el-table-column prop="name" label="员工姓名" width="140" />  
            <!-- <el-table-column label="本月考勤打卡信息">
                <el-table-column v-for="(item, index) in attendanceData[0].attendance" :key="index" :label="item.days">
                    <template #default="scope">
                        <span>{{ scope.row.attendance[index].status}}</span>
                    </template>
                </el-table-column>
            </el-table-column> -->
             <el-table-column label="本月考勤统计">
                 <el-table-column prop="name" label="应出勤天数" width="220" />  
                 <el-table-column prop="name" label="实际出勤天数" width="120" />  
                 <el-table-column prop="name" label="迟早" width="120" /> 
                 <el-table-column prop="name" label="早退" width="120" /> 
                 <el-table-column prop="name" label="打卡异常天数" width="120" /> 
                 <el-table-column prop="name" label="请假天数" width="120" /> 
                 <el-table-column prop="name" label="年假" width="120" /> 
            </el-table-column>

            <el-table-column fixed="right" label="设置" width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看详情</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="page">
        <el-pagination background layout="prev, pager, next" :total="200" 
            @current-change="currentChange"
        />
    </div>


        <el-dialog v-model="isShowModifyinformation" title="员工打卡信息">
            <el-calendar ref="calendar">
                <template #header="{ date }">
                <div style=" width: 100%">
                    <el-button-group>
                    <el-button size="small" @click="selectDate('prev-month')">
                        下月
                    </el-button>
                    <el-button size="small" @click="selectDate('next-month')">
                        上月
                    </el-button>
                    </el-button-group>
                    <span style="padding:0px 20px">当前月份{{ date }}</span>
                </div>
                </template>
                <template #dateCell="{ data }">
                <div style="width: 100%; height: 100%">
                    <div style="text-align: center">
                        {{ data.day.split("-").slice(2).join("") }}
                    </div>
                    <div style="text-align: center">
                    <span
                        class="remark-text calendar-time"
                        v-for="(item, index) in dealMyDate(data.day)"
                        :key="index"
                    >
                        {{ item }}
                    </span>
                    </div>
                </div>
                </template>
            </el-calendar>

            <template #footer>
            <span class="dialog-footer">
                <el-button @click="isShowModifyinformation = false">取消</el-button>
                <el-button type="primary" @click="isShowModifyinformation = false">确认</el-button>
            </span>
            </template>
        </el-dialog>


</template>

<script>
import { ref, reactive } from "vue";
import axios from 'axios';

export default {
    name: 'UseraAdmin',
    setup(props) {


        const calendar = ref();
        const selectDate = (val) => {
            calendar.value.selectDate(val);
        };
        const resDate = reactive([
        { date: "2022-07-30", content: "10" },
        { date: "2022-07-01", content: "20" },
        { date: "2022-07-02", content: "划水" },
        { date: "2022-07-24", content: "摸鱼" },
        { date: "2022-07-25", content: "学习" },
        { date: "2022-07-26", content: "学习" },
        { date: "2022-07-27", content: "学习" },
        { date: "2022-07-28", content: "摸鱼" },
        ]);

        const dealMyDate = (v) => {
            let res = "";
            for (let index = 0; index < resDate.length; index++) {
                if (resDate[index].date == v) {
                res = resDate[index].content;
                break;
                }
            }
            return res;
        };
        return {
            dealMyDate,
            selectDate,
            calendar
        };
    },
    created(){
        const year = new Date().getFullYear(),
              month = new Date().getMonth() + 1;

        const days = new Date(year,month,0);
       
        this.currenTime = {
            year,
            month
        }

    },
    data(){
        return{

            // 搜索指定月份考勤信息
            search: {
                year: '2022',
                month: '',
            },
            // 当前月份
            currentMothData:{
                year: new Date().getFullYear(),
                month: new Date().getMonth()
            },
            // 员工打卡数据
            attendanceData: [{
                id:1,
                name: '黎明',
            },
            {
                id:1,
                name: '黎明',
            }
            ],
            //当前数据时间
            currenTime: {},
            // 请求员工打卡数据,
            querInfo: {
                pageNum: 1,
                pageSize: 10,
                year: 2022,
                month: 1
            },
            // 显示修改员工界面。
            isShowModifyinformation: false,
            aItmeUserData:{},
            formLabelWidth: '140px',
        }
    },
    methods: {
        //搜索员工信息
        getDataList(){
            console.log(this.currentMothData);
        },
        // 修改员工考勤打卡信息
        handleClick(row){
            console.log(row);
            this.aItmeUserData = {
                id: row.id,
                name: row.name,
                sex: row.sex,
                username: row.username,
                password: row.password,
                phone: row.phone,
                create_user: row.create_user,
                create_time: row.create_time,
                status: row.status
            }
            this.isShowModifyinformation  = true;
        },
        // 新增员工
        IncreaseEmployees(){
             this.isShowModifyinformation = true;
        },
        // 分页数据请求。
        currentChange(e){
            console.log('currentChange');
            console.log(e);
        },
        // 取消修改员工信息
        cancelButton(){
            this.isShowModifyinformation = false;
            this.aItmeUserData = {};
        },
        // 确认修改员工信息
        confirmButton(){
            this.isShowModifyinformation = false;
            this.aItmeUserData = {};
        }
    },
    computed: {

    },

}
</script>

<style lang="scss">
    .search{
        width: 100%;
    }

    .content{
        width: 100%;
        padding-bottom: 15px;
        padding-top: 15px;
        background-color: #ffffff;
    }

    .page{
        width: 100%;
        height: 30px;
        // background-color: yellow;
    }

    .modifyinformation{
        position: absolute;
        top: 0;
        left: 0;
        // float: left;
        width: 600px;
        height: 600px;
        z-index: 100;
    }
</style>

